<!DOCTYPE html>
<html lang="en">
{% load  static %}
<head>
    <meta charset="UTF-8">

</head>
<body>

<div style="border: red solid 2px ; width: 400px ;height:200px ;margin-left: 50px" id="div1">
    <form action="{% url 'goods:puter' %}" method="post">

        <div>
            <img src="{{ image_url}}" alt="" id="img_code">
            <input autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" id="id_captcha_1" name="captcha_1" type="text" placeholder="输入验证吗"/>
            <input id="id_captcha_0" name="captcha_0" type="hidden" value="{{ hashkey }}" />

        </div>
         <input type="button" value="提交">
    </form>

</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        //alert(1)de
        $('#img_code').click(function () {
            var hashkey=$('#id_captcha_0').val()
            var code=$('#id_captcha_1').val();
            //alert(hashkey+code)
            $.ajax({
                type:'get',
                url:'http://127.0.0.1:8000/puter',
                success(meg){
                    $('#img_code').attr('src',meg.image_url)
                    $('#id_captcha_0').attr('value',meg.hashkey)

                    //$('#id_captcha_0').value=hashkey
                    //document.getElementById('id_captcha_0').value=hashkey;
                }
            })
        })
        $('#id_captcha_1').blur(function () {
            //alert(1)
            var code=$('#id_captcha_1').val()
            var hashkey=$('#id_captcha_0').val()
            //alert(code+hashkey)
            $.ajax({
                type:'get',
                url:'/img_check/',
                data:{'hashkey':hashkey,'code':code},
                success(meg){
                    //alert('111');
                    //alert(meg.status)(
                    if (meg.status==0){
                        alert('验证码错误')
                    }
                }

            })
        })

    })
</script>


</body>
</html>